<template>
  <div id="useragreement">
    <top-bar title="平安到家用户协议" v-show="IsTopbar" @goback="handleGoback"></top-bar>
    <vue-markdown class="markdown-body" :source="mdSource"></vue-markdown>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar';
import VueMarkdown from 'vue-markdown';
import 'github-markdown-css';
import Utils from '@/common/pakjUtils';
import axios from 'axios';
export default {
  name: 'App',
  data() {
    return {
      IsTopbar: true,
      mdUrl: process.env.BASE_URL + 'static/markdown/useragreement.md',
      mdSource: ''
    };
  },
  components: {
    VueMarkdown,
    [TopBar.name]: TopBar
  },
  created() {
    axios.get(this.mdUrl).then(res => {
      this.mdSource = res.data;
    });
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    if (Utils.isMiniProgram()) {
      this.IsTopbar = false;
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    handleGoback() {
      if (Utils.isMiniProgram()) {
        wx.miniProgram.navigateBack({
          delta: 0
        });
      }
    }
  }
};
</script>

<style lang="stylus">
#useragreement {
  .markdown-body {
    margin: 24px;
    letter-spacing: 1px;
    font-size: font-body-normal;

    h4 {
      text-indent: 2em;
    }

    p {
      strong {
        text-indent: 2em;
      }

      text-indent: 2em;
    }

    blockquote {
      p {
        text-indent: 0em;
      }
    }
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
}
</style>
